<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小学数学自动出题程序</title>
    <link rel="stylesheet" href="static/css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 标题 -->
        <header class="header">
            <h1>小学数学练习</h1>
        </header>

        <!-- 控制面板 -->
        <div class="control-panel">
            <button id="generateBtn" class="btn btn-primary">生成新题目</button>
            <button id="resetBtn" class="btn btn-danger">重置</button>
        </div>

        <!-- 统计信息 -->
        <div class="stats-panel">
            <div class="stat-item">
                <span class="stat-label">当前轮分数:</span>
                <span id="currentScore" class="stat-value">0/0</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">累计准确率:</span>
                <span id="overallAccuracy" class="stat-value">0.0% (0/0)</span>
            </div>
        </div>

        <!-- 计时器 -->
        <div class="timer-panel">
            <div class="timer-item">
                <span class="timer-label">总用时:</span>
                <span id="totalTimer" class="timer-value">00:00</span>
            </div>
            <div class="timer-item">
                <span class="timer-label">当前题目用时:</span>
                <span id="questionTimer" class="timer-value">00:00</span>
            </div>
        </div>

        <!-- 题目区域 -->
        <div class="question-panel">
            <div id="questionText" class="question-text">点击"生成新题目"开始练习</div>
            
            <div class="answer-panel">
                <label for="answerInput" class="answer-label">答案:</label>
                <input type="number" id="answerInput" class="answer-input" placeholder="请输入答案">
                <button id="submitBtn" class="btn btn-success" disabled>提交答案</button>
                <button id="nextBtn" class="btn btn-warning" disabled>下一题</button>
            </div>
            
            <div id="resultText" class="result-text"></div>
        </div>

        <!-- 进度条 -->
        <div class="progress-panel">
            <div class="progress-info">
                <span class="progress-label">进度:</span>
                <span id="progressText" class="progress-text">0/10</span>
            </div>
            <div class="progress-bar">
                <div id="progressFill" class="progress-fill"></div>
            </div>
        </div>

        <!-- 最终结果模态框 -->
        <div id="resultModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>练习完成！</h2>
                    <span class="close">&times;</span>
                </div>
                <div class="modal-body">
                    <div id="finalResults"></div>
                </div>
                <div class="modal-footer">
                    <button id="closeModal" class="btn btn-primary">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script src="static/js/app-static.js"></script>
</body>
</html>
